$(function() {
	// Bind the change event
	$("#company").unbind("change", eDropLangChange).bind("change",
			eDropLangChange);
	$("#department").unbind("change", eDropFrameChange).bind("change",
			eDropFrameChange);
});

// The change event of language dropdown-list
var eDropLangChange = function() {
	// The selected value of the language dropdown-list.
	var selectedValue = $(this).val();

	// show all options.
	$("#department").children("span").each(function() {
		// use the content of the <span> replace the <span>
		$(this).children().clone().replaceAll($(this));
	});

	// Filter the data through selected value of language dropdown-list except
	// <Please Select>.
	// If the option is <Please Select>, it only needs to show all and hide
	// nothing.
	if (parseInt(selectedValue) != '') {
		// hide the option whose parentid is not equal with selected value of
		// language dropdown-list.
		// The <Please Select> option should not be hidden.
		$("#department").children(
				"option[parentid!='" + selectedValue + "'][value!='']").each(
				function() {
					// add a <span> around the <option> and hide the <span>.
					$(this).wrap("<span style='display:none'></span>");
				});
	}
};

// The change event of frame dropdown-list.
var eDropFrameChange = function() {
	// Find the selected option of frame dropdown-list. set the value of
	// language dropdown-list by selected parentid.
	$("#company").val($(this).children("option:selected").attr("parentid"));
};